<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户信息</title>
    <style>
    a:link{
				text-decoration: none;
				color:#BACCD9;
			}
			a:visited{
				text-decoration: none;
				color:#BACCD9;
			}
			a:hover{
				text-decoration: none;
				color:#FFFFFF;
			}
			.menu{
				background-color: #EC8AA4;/*中国传统报春色*/
				display: flex;
				justify-content: space-between;
				height:60px;
				border-radius: 5px;
			}
			.menu .menul ul{
				color:#E4DFD7;/*中国传统珍珠色*/
				list-style: none;
				display:flex;
				height: 30px;
			}

			.menu .menul ul li{
				font-size: 12px;
				display:flex;
				align-items: center;
				margin:0 15px;
				cursor:pointer;
			}
			.menu .menul ul li:hover{
				color:#FFFFFF;
			}
			.menu .menul ul li .yd{
			    font-size: 20px;
				font-weight: 888;
				letter-spacing:2px;
				margin:0 -10px 0 -30px;
				color:#E4DFD7;/*中国传统珍珠色*/
				cursor: default;
			}
			.menu .menul ul li .yd:hover{
			    color:#FFFFFF;
			    cursor:pointer;
			    }
			.menu .menur ul{
				color:#E4DFD7;/*中国传统珍珠色*/
				list-style: none;
				display:flex;
				height: 30px;
			}
			.menu .menur ul li{
				font-size: 12px;
				display:flex;
				align-items: center;
				margin:0 15px;
				cursor:pointer;
			}
			.menu .menur ul li:hover{
				color:#FFFFFF;
			}

			.sidebar{
				position: absolute;
				display:flex;
			    top:60px;
				width: 180px;
				height:100vh;
			    border-radius: 5px;
			    background-color: #EC8AA4;/*中国传统报春色*/
			}

			.sidebar ul{
			    top:300px;
				width: 180px;
				height:50px;
				padding:0;
				position:absolute;
			}
			.sidebar ul li{
				width:180px;
				height:40px;
				margin:12px 0 ;
				cursor: pointer;
				display: flex;
				justify-content: space-between;
				align-items: center;
				color:#FFFFFF;/*中国传统珍珠色*/
			}
			.sidebar ul li:hover{
				color: #FFFFFF;/*传统精白色*/
				background-color:#BDAEAD;/*中国传统芦穗色*/
				border-radius: 5px;
			}
			.sidebar ul li a{
				margin-left: 50px;
				font-size:14px;
			    color:#E4DFD7;/*中国传统珍珠色*/
			    letter-spacing:2px;
			    }
			.sidebar ul li a:hover{
				color: #FFFFFF;
               }

            body {
              background-color: #F7F7F7;
              font-family: Arial, sans-serif;
            }

            .container {
              max-width: 600px;
              margin: 0 auto;
              padding: 20px;
            }

            h1 {
              font-size: 24px;
              color: #333;
              margin-bottom: 15px;
            }

            .form-group {
              margin-bottom: 15px;
            }

            .form-group label {
              display: block;
              margin-bottom: 5px;
              font-weight: bold;
              color: #666;
            }

            .form-group input[type="text"],
            .form-group input[type="password"],
            .form-group input[type="email"],
            .form-group select,
            .form-group textarea {
              width: 100%;
              padding: 10px;
              border: 1px solid #DDD;
              border-radius: 4px;
              font-size: 16px;
            }

            .form-group textarea {
                resize: none;
            }


            .form-group input[type="submit"] {
              background-color: #333;
              color: #FFF;
              border: none;
              padding: 10px 20px;
              font-size: 16px;
              cursor: pointer;
              border-radius: 4px;
            }

            .form-group input[type="submit"]:hover {
              background-color: #555;
            }

            .avatar {
              display: block;
              width: 150px;
              height: 150px;
              border-radius: 50%;
              object-fit: cover;
              margin-bottom: 20px;
            }
  </style>
</head>

<body>
    <div class="menu">
        <div class="menul">
            <ul >
                <li><p class="yd"><a href="http://localhost:8080/user/main">YueDu</a></p></li>
                <li><a href="http://localhost:8080/user/main">系统主页</a></li>
                <li>帮助中心</li>
                <li>合作伙伴</li>
                <li>开发团队</li>

            </ul>
        </div>
        <div class="menur">
            <ul>
                <li th:onclick="window.location.href='/gotoSignUp'"><a>注册</a></li>
                <li><a href="http://localhost:8080">注销</a></li>
                <li onclick="goBack()">返回</li>
            </ul>
        </div>
        <div class="sidebar">

            <img class="picture" src="/img/frost.jpg" alt="">
            <p id="hi">用户名称六字</p>

            <ul>
                <li><a href="http://localhost:63342/reading-management-system/src/main/resources/templates/userStu.html?_ijt=h39mlt3ed8nm5in2esp670694e&_ij_reload=RELOAD_ON_SAVE">用户模块</a></li>
                <li th:onclick="window.location.href='/user/article'"><a>文章模块</a></li>
                <li><a href="">试题模块</a></li>

                <li><a href="">合作伙伴</a></li>
                <li><a href="">开发团队</a></li>

            </ul>
        </div>
    </div>
<div class="container">
    <h1>用户信息</h1>
    <form>
        <div class="form-group">
            <label for="avatar">个人头像</label>
            <input type="file" id="avatar" name="avatar">
            <img class="avatar" src="https://via.placeholder.com/150" alt="Preview" id="avatar-preview">
        </div>
        <div class="form-group">
            <label for="name">用户名</label>
            <input type="text" id="name" name="name" required>
        </div>
        <div class="form-group">
            <label for="password">密码</label>
            <input type="password" id="password" name="password" required>
        </div>
        <div class="form-group">
            <label for="gender">性别</label>
            <select id="gender" name="gender" required>
                <option value="">-- 请选择性别 --</option>
                <option value="male">男</option>
                <option value="female">女</option>
            </select>
        </div>
        <div class="form-group">
            <label for="signature">个性签名</label>
            <textarea id="signature" name="signature" rows="3"></textarea>
        </div>
        <div class="form-group">
            <input type="submit" value="保存">
        </div>
    </form>
</div>
<script>
        function goBack() {
          window.history.go(-1);
        }
    </script>

</body>

</html>